<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-02-15 17:58:43
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\layout\uiFlexbox\uiFlexbox.vue
 * CIMC-V2
-->
<template>
  <div
    id="boxsss"
    ref="box"
    :class="[
      'p-' + info.extension.padding.value,
      'mt-' + (info.extension.topMargin && info.extension.topMargin.value),
      'mr-' + (info.extension.rightMargin && info.extension.rightMargin.value),
      'mb-' + (info.extension.bottomMargin && info.extension.bottomMargin.value),
      'ml-' + (info.extension.leftMargin && info.extension.leftMargin.value),
      info.extension.shadow.value,
      info.extension.border.value,
      info.extension.rounded.value,
      info.extension.isLine?.value ? 'show_b' : '',
    ]"
    :style="{
      height: `${info.extension.boxHeight && info.extension.boxHeight.value}vh`,
      width: '100%',
      backgroundColor: `${info.extension.bgColor && info.extension.bgColor.value}`,
    }"
  >
    <div
      ref="child"
      style="transition: all 0.5s; transform-origin: left top"
      :style="{
        width: info.extension.boxInnerWidth.value + 'px',
        height: info.extension.boxInnerHeight.value + 'px',
      }"
    >
      <div class="h-full">
        <Widget
          class="flex"
          :class="[
            info.extension.justifyAlign && 'justify-' + info.extension.justifyAlign.value,
            info.extension.flexDer && 'flex-' + info.extension.flexDer.value,
          ]"
          :list="info.list"
          :style="{
            alignItems: info.extension.itemsAlign && info.extension.itemsAlign.value,
          }"
        />
      </div>
    </div>
  </div>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { UiMixin } from '@ve/mixin'
  export default defineComponent({
    name: 'UiSelfAdaption',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin],
    inject: {
      hasPreview: { default: false },
      showFullScreen: { default: false },
    },
    data() {
      return {
        winWidth: 0,
        timer: null,
        conWidth: 0,
      }
    },
    watch: {
      showFullScreen: {
        handler(val) {
          this.timer && clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            if (val.value) {
              this.scalePreview(this.$refs.box.offsetWidth)
            } else {
              this.loadScalePreview(this.$refs.box.offsetHeight / this.info.extension.boxInnerHeight.value)
            }
          }, 500)
        },
        deep: true,
      },
    },
    mounted() {
      // this.request(this.info.extension.requestSet.value, function () {})
      // this.$nextTick(() => {
      // document.getElementById('boxsss').onclick = (e) => {
      //   let oDiv = document.createElement('div')
      //   oDiv.className = 'popAniFrame'
      //   oDiv.innerText = 'CIMC'
      //   oDiv.style.left = e.clientX - 25 + 'px'
      //   oDiv.style.top = e.clientY - 25 + 'px'
      //   document.getElementsByTagName('body')[0].appendChild(oDiv)
      //   setTimeout(() => {
      //     document.getElementsByTagName('body')[0].removeChild(oDiv)
      //   }, 1000)
      // }
      // })
      /**
       * demo自适应逻辑
       * 不全屏下
       * 根据1920*1080的相似比算出当前clientHeight下的盒子缩放高度
       * 当屏幕的宽度大于计算宽度值margin:0 auto,小于计算值则进行缩放scale
       * 全屏下
       * 去掉margin:auto,缩放至1920*1080
       *
       * 产品当前自适应逻辑
       * 1920*1080的相似比计算进行scale
       *
       * 差别
       * 没有第一步先算盒子缩放导致了非全屏下会出现滚动条
       *
       * 实现难点
       * 拖拉拽时高度和宽度都是动态的，无法计算
       *
       * 实现思路
       * 自适应盒子新增内容区，
       * 根据画布宽度先算出1080下的自适应高度，自适应高度与当前屏幕高度比例算出内容区宽度和高度
       * 公式 1920 / 1080 = 画布宽 / 自适应高度，内容区高度 / 自适应高度 = 当前屏幕高度 / 1080 ，内容区宽度 / 内容区高度 = 1920 / 1080
       *
       * 产生问题
       * 可能内容区页面会太小
       *
       * 解决思路
       * 内容区可缩放，移动
       */

      /**
       * 1920 * 1080 的内容区
       *
       * 根据 当前屏幕宽 / 1080 = scale值
       *
       * 缩放内容区
       *
       * 1920 * scale值 = 缩放后的内容区宽度
       *
       * 当当前屏幕大于缩放后的内容区宽度时，margin:0 auto,小于时，，二次缩放
       *
       * 新增概念变量，是编辑状态还是菜单状态
       * 菜单状态时，进行第一次高度缩放，编辑状态时，省去第一次缩放
       *
       */
      //相似比设置宽高
      this.timer = null
      this.$nextTick(() => {
        let scale = Math.min(
          this.$refs.box.offsetWidth / this.info.extension.boxInnerWidth.value,
          this.$refs.box.offsetHeight / this.info.extension.boxInnerHeight.value
        )
        this.$refs.child.style.transform = `scale(${scale})`
        this.$refs.child.style.marginLeft = (this.$refs.box.offsetWidth - this.$refs.child.offsetWidth * scale) / 2 + 'px'

        // let scale = this.$refs.box.offsetHeight / this.info.extension.boxInnerHeight.value
        //内容区宽度
        // this.conWidth = this.info.extension.boxInnerWidth.value * scale
        // if (!this.hasPreview || !this.showFullScreen.value) {
        //   this.scalePreview(this.$refs.box.offsetWidth)
        // } else {
        //   this.loadScalePreview(scale)
        // }
        // let innerHeight = window.innerHeight
        window.onresize = () => {
          this.timer && clearTimeout(this.timer)
          this.timer = setTimeout(() => {
            let scale = Math.min(
              this.$refs.box.offsetWidth / this.info.extension.boxInnerWidth.value,
              this.$refs.box.offsetHeight / this.info.extension.boxInnerHeight.value
            )
            this.$refs.child.style.transform = `scale(${scale})`
            this.$refs.child.style.marginLeft = (this.$refs.box.offsetWidth - this.$refs.child.offsetWidth * scale) / 2 + 'px'

            //全屏根据比例缩放
            // if (innerHeight != window.innerHeight || !this.showFullScreen.value) {
            //   this.scalePreview(this.$refs.box.offsetWidth)
            // } else {
            //   if (this.conWidth > this.$refs.box.offsetWidth) {
            //     this.scalePreview(this.$refs.box.offsetWidth)
            //   } else {
            //     this.loadScalePreview(scale)
            //   }
            // }
          }, 500)
        }
      })
    },
    methods: {
      loadScalePreview(scale) {
        this.$refs.child.style.transform = `scale(${scale})`
      },
      scalePreview(winWidth) {
        // this.winWidth = this.$refs.box.offsetWidth
        this.$refs.child.style.transform = `scale(${winWidth / this.info.extension.boxInnerWidth.value})`
      },
    },
  })
</script>
<style>
  .uiSelfAdaption {
    width: 100%;
    flex: none !important;
    /* overflow: hidden; */
  }
  .show_b {
    position: relative;
  }
  .show_b::before,
  .show_b::after {
    content: '';
    position: absolute;
    top: -5px;
    bottom: -5px;
    left: -5px;
    right: -5px;
    border: 5px solid #f00;
    clip-path: inset(0px round 10px);
    animation: clippath 5s infinite linear;
  }
  .show_b::after {
    animation: clippath 5s infinite -2.5s linear;
  }
  @keyframes clippath {
    0% {
      clip-path: inset(0 0 95% 0);
      filter: hue-rotate(0deg);
    }
    25% {
      clip-path: inset(0 95% 0 0);
    }
    50% {
      clip-path: inset(95% 0 0 0);
    }
    75% {
      clip-path: inset(0 0 0 95%);
    }
    100% {
      clip-path: inset(0 0 95% 0);
      filter: hue-rotate(360deg);
    }
  }
  .popAniFrame {
    opacity: 0;
    animation: ani111 1s;
    background: #1cd3be;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    z-index: 99999;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
    user-select: none;
  }
  @keyframes ani111 {
    from {
      opacity: 0.2;
      transform: scale(1);
    }
    to {
      opacity: 0;
      transform: scale(3);
    }
  }
</style>
